/*
 * @Description: 系统配置
 * @Author: Zzt
 * @Date: 2022-11-11 14:52:39
 * @LastEditTime: 2023-01-17 20:38:10
 */
import VisualizationMain from '@/components/DataVisualization/VisualizationMain';
import Nav from '@/components/Nav';
import { Tabs } from 'antd';
import { CheckboxValueType } from 'antd/es/checkbox/Group';
import classNames from 'classnames/bind';
import { useEffect, useState } from 'react';
import styles from '../styles/identificationDisposal.module.scss';
import { useIdentificationDisposalContext } from '../contexts/IdentificationDisposalContext';
const { TabPane } = Tabs;
const cx = classNames.bind(styles);

const according = [{ fondName: '按时间', id: 1 }];
const table = [
  { title: '时间', dataIndex: 'time', key: 'time' },
  { title: '全宗', dataIndex: 'fondsName', key: 'fondsName' },
  { title: '鉴定类型', dataIndex: 'IdentificationType', key: 'IdentificationType' },
  { title: '操作员', dataIndex: 'operators', key: 'operators' },
  { title: '鉴定次数', dataIndex: 'IdentificationNum', key: 'IdentificationNum' }
];
const IdentificationWarp = () => {
  const { dataList } = useIdentificationDisposalContext();

  // 选中的按照类型
  const [selectAccordingId, setSelectAccordingId] = useState(1);
  const [options, setOptions] = useState([
    {
      title: '鉴定类型',
      name: 'identificationType',
      checkList: [
        { value: 1, label: '价值鉴定' },
        { value: 2, label: '开放鉴定' },
        { value: 3, label: '销毁鉴定' }
      ]
    }
  ]);
  const [visibleData, setVisibleData] = useState([]);
  const [condition, setCondition] = useState(<></>);
  const [tableList, setTableList] = useState(table);
  const [xData, setXData] = useState(dataList.map((item: any) => item.frequency));
  const [yData, setYData] = useState([]);
  /**
   * @description: 切换全宗
   * @param {number} val 选中的全宗
   */
  const handleAccordingChange = (val: any) => {
    console.log(val);
    setSelectAccordingId(parseInt(val, 10));
  };
  const onChange = (checkedValues: CheckboxValueType[]) => {
    console.log('checked = ', checkedValues);
  };
  const onChangeNav = (value: any) => {
    console.log('value', value);
  };
  useEffect(() => {
    if (selectAccordingId === 1) {
      setVisibleData(dataList);
      setYData(dataList.map((item: any) => item.time));
      setCondition(<Nav onChangeNav={onChangeNav} />);
    }
  }, [selectAccordingId]);
  /* 改变触发 */
  const onChangeYear = (value: any) => {
    console.log(value);
    // setXData(dataList.map((item: any) => item[value.segmentValue]));
  };
  return (
    <>
      <h2 className={cx('title')}>自动鉴定</h2>

      <VisualizationMain
        type={'按时间'}
        condition={condition}
        segmented={[
          { label: '价值鉴定', value: 'value' },
          { label: '开放鉴定', value: 'openUp' },
          { label: '销毁鉴定', value: 'destruction' }
        ]}
        tableList={tableList}
        choiceList={options}
        data={{ visibleData, xData, yData }}
        onChange={onChangeYear}
      />
    </>
  );
};
export default IdentificationWarp;
